<template>
    <el-row :gutter="28">
      <el-col :span="9" style="margin-top:20px">
        <el-button type="primary" class="button" @click="buttoncli">摁我全屏</el-button>
        <el-card shadow="hover">
          <div class="use">
            <!-- userImg -->
            <!-- <img src="" alt=""/> -->
            <div class="userinfo">
              <p class="name">Admin</p>
              <p class="access">超级管理员</p>
            </div>
            <div class="login-info">
              <p>上次登录时间：2021-7-19</p>
              <p>上次登录地点：武汉</p>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top:10px;height:370px">
          <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
          v-for="(val,key) in tableLabel" 
          :key="key"
            :prop="key"
            :label="val">
          </el-table-column>
          
        </el-table>
        </el-card>
      </el-col>
      <el-col style="margin-top:20px;" :span="15">
      
        <div class="num" style="display:flex;flex-wrap: wrap;justify-content: space-between;">
          <el-card style="width:30%" v-for="item in countData" :key="item.value" :body-style="{display:'flex',padding:0}">
            <i class="icon" :class="'el-icon-'+item.icon" :style="{background:item.color,fontSize:'80px'}"></i>
            <div class="detail">
              <p class="num">{{item.value}}</p>
              <p class="txt">{{item.name}}</p>
            </div>
          </el-card>
        </div>
        <el-card style="height:180px">
          <div style="heighr:180px" ref="echars"></div>
        </el-card>
        <div class="graph" style="display:flex;justify-content: space-between;">
            <el-card style="height:160px;width:48%;"></el-card>
            <el-card style="height:160px;width:48%;"></el-card>
          </div>
      </el-col>
    </el-row>
</template>
<script>
import {getData} from "../../https/data"
import * as echarts from 'echarts';
export default {
  name: 'Home',
  data(){
    return{
      tableData:[],
      tableLabel:{
        name:"课程",
        todayBuy:"今日购买",
        monthBuy:"本月购买",
          totalBuy:"总购买",
      },
      countData:[
        {
          name:"今日支付订单",
          value:1,
          icon:"success",
          color:"#2ec7c9"
        },{
          name:"今日收藏订单",
          value:2,
          icon:"star-on",
          color:"#2ec7c9"
        },{
          name:"今日未支付订单",
          value:3,
          icon:"s-goods",
          color:"#2ec7c9"
        },{
          name:"本月支付订单",
          value:4,
          icon:"success",
          color:"#2ec7c9"
        },{
          name:"今日收藏订单",
          value:5,
          icon:"star-on",
          color:"#2ec7c9"
        },{
          name:"今日未支付订单",
          value:6,
          icon:"s-goods",
          color:"#2ec7c9"
        },
      ],
      isFullscreen: false
    }
  },
  methods:{
     buttoncli(){
                if (!screenfull.enabled) { // 如果不允许进入全屏，发出不允许提示
                this.$message({
                  message: '不支持全屏',
                  type: 'warning'
                })
                return false
             }
              screenfull.toggle()
              this.$message({
                  message: '全屏啦',
                  type: 'success'
                })
      }
        
  },
  mounted(){
    getData().then(res=>{
      console.log(res);
      const {code,data} = res.data;
      if(code===200){
        this.tableData=data.videoData
      }
    })
  }
}
</script>